<template>
  <!-- 直接使用原生picker，只自定义样式 -->
  <picker
    v-if="mode === 'selector'"
    class="xen-app-picker"
    mode="selector"
    :range="range"
    :range-key="rangeKey"
    :value="selectedIndex"
    @change="handleChange"
  >
    <view class="picker-display">
      <text class="picker-text" :class="{ 'has-value': displayValue }">
        {{ displayValue || placeholder }}
      </text>
      <uni-icons type="down" size="16" color="#999"></uni-icons>
    </view>
  </picker>

  <picker
    v-else-if="mode === 'date'"
    class="xen-app-picker"
    mode="date"
    :value="value"
    @change="handleDateChange"
  >
    <view class="picker-display">
      <text class="picker-text" :class="{ 'has-value': displayValue }">
        {{ displayValue || placeholder }}
      </text>
      <uni-icons type="down" size="16" color="#999"></uni-icons>
    </view>
  </picker>

  <picker
    v-else-if="mode === 'time'"
    class="xen-app-picker"
    mode="time"
    :value="value"
    @change="handleTimeChange"
  >
    <view class="picker-display">
      <text class="picker-text" :class="{ 'has-value': displayValue }">
        {{ displayValue || placeholder }}
      </text>
      <uni-icons type="down" size="16" color="#999"></uni-icons>
    </view>
  </picker>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";

interface Props {
  mode?: "selector" | "date" | "time";
  range?: string[] | any[];
  rangeKey?: string;
  value?: string | number;
  placeholder?: string;
  disabled?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  mode: "selector",
  range: () => [],
  rangeKey: "",
  value: "",
  placeholder: "请选择",
  disabled: false,
});

const emit = defineEmits<{
  (e: "change", value: any): void;
}>();

const selectedIndex = ref(0);

// 计算显示值
const displayValue = computed(() => {
  if (props.mode === "selector") {
    if (props.value !== undefined && props.value !== "") {
      if (props.rangeKey) {
        const item = props.range.find(
          (item: any) => item[props.rangeKey] === props.value,
        );
        return item ? item[props.rangeKey] : "";
      } else {
        return props.value;
      }
    }
    return "";
  } else {
    return props.value || "";
  }
});

// 监听value变化，更新selectedIndex
watch(
  () => props.value,
  (newValue) => {
    if (props.mode === "selector" && !props.rangeKey) {
      const index = props.range.findIndex((item) => item === newValue);
      selectedIndex.value = index >= 0 ? index : 0;
    }
  },
  { immediate: true },
);

// 处理选择器变化
const handleChange = (e: any) => {
  const index = e.detail.value;
  selectedIndex.value = index;

  let value;
  if (props.rangeKey) {
    value = props.range[index] ? props.range[index][props.rangeKey] : "";
  } else {
    value = props.range[index] || "";
  }

  emit("change", value);
};

// 处理日期变化
const handleDateChange = (e: any) => {
  emit("change", e.detail.value);
};

// 处理时间变化
const handleTimeChange = (e: any) => {
  emit("change", e.detail.value);
};
</script>

<style lang="scss" scoped>
.xen-app-picker {
  width: 100%;
}

.picker-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  height: 36px;
  box-sizing: border-box;
  transition: all 0.3s ease;

  &:active {
    background-color: #f9fafb;
    border-color: #667eea;
  }
}

.picker-text {
  flex: 1;
  font-size: 14px;
  color: #9ca3af;
  line-height: 1.4;

  &.has-value {
    color: #374151;
  }
}
</style>
